<template>
	<view class="menu-container">
		<!-- 搜索栏 -->
		<view class="search-box" style="position: sticky; top: 0;">
			<my-search :bgcolor="'#efefef'" :search_box_bgcolor="'#fff'" :width="'95%'" @search="gotoSearch">
			</my-search>
		</view>

		<!-- 热门分类 -->
		<view class="main-row hot-cate-row">
			<view class="title">
				<text>热门分类</text>
			</view>
			<view class="content">
				<view class="tag" v-for="(item,i) in cate_tag_list" :key="i" @click="getMenuOfType(item.tagText)">
					<!-- <iconfont :name="item.tagIcon" :color="item.color" :size="40"></iconfont> -->
					<image :src="item.img" style="height: 80rpx;" mode="heightFix"></image>
					<text>{{item.tagText}}</text>
				</view>
			</view>
		</view>

		<!-- 食材组合 -->
		<view class="main-row food-combine-row">
			<view class="title">
				<text>食材组合</text>
				<view class="more-tips" style="display: flex;align-items: center; font-size: 18px; color: #009fe8;"
					@click="gotoMoreFridgeMenus">
					<text>更多</text>
					<iconfont :name="'more'" :color="'#009fe8'" :size="23"></iconfont>
				</view>
			</view>
			<view v-if="fridge_menu.length!=0" class="content" @click="getMenuDetail(fridge_menu[randomIndex].id)">
				<image style="border-radius: 20rpx; height: 250rpx; width: 50%;" :src="fridge_menu[randomIndex].imgSrc">
				</image>
				<view class="right-box">
					<text class="name-text">{{fridge_menu[randomIndex].name}}</text>
					<view class="material-list">
						<view class="item-box" v-for="(item,i) in fridge_menu[randomIndex].materials" :key="i">
							<image style="height: 120rpx; width: 120rpx;" :src="item.imgSrc"></image>
							<view class="item-name-text">
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="content" v-else>
				<view style="height: 120rpx; display: flex; align-items: center;justify-content: center;width: 100%;">
					<uni-icons type="info" size="30"></uni-icons>
					<text>暂无相关菜谱</text>
				</view>
			</view>
		</view>

		<!-- 冰箱库存 -->
		<view class="main-row fridge-stock-row">
			<view class="title">
				<text>冰箱库存</text>
			</view>
			<view class="content" v-if="obj_list.length!=0">
				<view class="item-box" v-for="(item,i) in stock_list" :key="i" @click="getDishesByObjType(item.id)">
					<image mode="aspectFit" :src="item.imgSrc">
					</image>
					<view class="item-name-text">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="content" v-else>
				<view style="height: 120rpx; display: flex; align-items: center;justify-content: center;width: 100%;">
					<uni-icons type="info" size="30"></uni-icons>
					<text>冰箱空空如也~</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入自己封装的 mixin 模块
	import badgeMix from '@/mixins/tabbar-badge.js'
	import {
		mapState
	} from 'vuex'

	export default {

		data() {
			return {
				// 热门分类
				cate_tag_list: [{
					img: '../../static/food_cate_icon/home-cook.png',
					tagText: '家常菜',
				}, {
					img: '../../static/food_cate_icon/noodles.svg',
					tagText: '面食',
				}, {
					img: '../../static/food_cate_icon/gruel.svg',
					tagText: '粥',
				}, {
					img: '../../static/food_cate_icon/chafing-dish.svg',
					tagText: '火锅',
				}, {
					img: '../../static/food_cate_icon/Japanese-food.svg',
					tagText: '日料',
				}, {
					img: '../../static/food_cate_icon/western-food.svg',
					tagText: '西餐',
				}, {
					tagIcon: 'fresh-circle',
					img: '../../static/food_cate_icon/junk-food.svg',
					tagText: '美式快餐',
					color: '#009fe8'
				}, {
					img: '../../static/food_cate_icon/drink.svg',
					tagText: '饮料',
				}, {
					img: '../../static/food_cate_icon/dessert.svg',
					tagText: '甜品',
				}, {
					img: '../../static/food_cate_icon/bread.svg',
					tagText: '面包',
				}],
				// 食材组合
				fridge_menu: [],
				// 随机展示食材组合
				randomIndex: 0,
				// 冰箱库存
				stock_list: []
			};
		},
		// 将 badgeMix 混入到当前的页面中进行使用
		mixins: [badgeMix],

		computed: {
			...mapState('object', ['obj_list'])
		},

		onShow() {
			this.load()
		},

		onPullDownRefresh() {
			uni.showLoading({
				mask: true
			})
			this.load()
			setTimeout(() => {
				uni.stopPullDownRefresh()
				uni.hideLoading()
			}, 1000)
		},

		methods: {
			load() {
				this.getStockList()
				this.getFridgeMenu()
			},

			// 请求
			async getFridgeMenu() {
				// TODO v5
				await uni.$api.menu.getFridgeMenu().then((fridge_menu) => {
					this.fridge_menu = fridge_menu
				}).then(() => {
					this.randomIndex = parseInt(Math.random() * (this.fridge_menu.length - 0) + 0)
				})
			},

			async getStockList() {
				this.stock_list = await uni.$api.menu.getRepository()
			},

			/**
			 * 标签菜谱分类
			 * @param {Object} tag
			 */
			async getMenuOfType(tag) {
				console.log(tag);
				await uni.$api.menu.getMenuOfType(tag).then((menu_list) => {
					this.gotoMenuList(menu_list)
				})
			},

			/**
			 * 库存物品对应菜谱
			 * @param {Object} otId
			 */
			async getDishesByObjType(otId) {
				await uni.$api.menu.getDishesByObjType(otId).then((menu_list) => {
					this.gotoMenuList(menu_list)
				})
			},

			/**
			 * 获取菜谱详情
			 * @param {Object} menuId
			 */
			async getMenuDetail(menuId) {
				console.log(menuId);
				await uni.$api.menu.getMenuDetail(menuId).then((menu) => {
					this.gotoMenuDetail(menu)
				})
			},

			// 跳转
			gotoSearch() {
				uni.navigateTo({
					url: '/pagesSub/pageSearch/menu_search/menu_search'
				});
			},

			gotoMenuList(menu_list) {
				uni.navigateTo({
					url: '/pagesSub/pageMenu/menu_list/menu_list?menu_list=' + JSON.stringify(
						menu_list)
				})
			},

			gotoMoreFridgeMenus() {
				if (this.fridge_menu.length == 0)
					return uni.$showMsg('冰箱已有物资暂无法匹配已收录菜谱！')
				this.gotoMenuList(this.fridge_menu)
			},

			gotoMenuDetail(menu) {
				uni.navigateTo({
					url: '/pagesSub/pageMenu/menu_detail/menu_detail?menu=' + JSON.stringify(menu)
				})
			},
		}
	}
</script>

<style lang="scss">
	.menu-container {

		.main-row {
			padding: 0 5%;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 22px;
				padding: 25rpx 0;
			}
		}

		.hot-cate-row {

			.content {
				width: 100%;
				background-color: #fff;
				border-radius: 20rpx;
				display: flex;
				flex-wrap: wrap;

				.tag {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 20%;
					padding: 20rpx 0;

					>text {
						margin-top: 5rpx;
					}
				}
			}
		}

		.food-combine-row {

			.content {
				display: flex;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 5px;

				.right-box {
					width: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;

					.name-text {
						display: flex;
						font-size: 22px;
						height: 50%;
						align-items: center;
					}

					.material-list {
						display: flex;
						width: 100%;
						height: 50%;
						justify-content: space-evenly;

						.item-box {
							position: relative;
							overflow: hidden;
							border-radius: 20rpx;

							.item-name-text {
								background-color: rgba(4, 11, 5, 0.5);
								width: 100%;
								position: absolute;
								bottom: 0;
								color: #fff;
								display: flex;
								justify-content: center;
							}
						}
					}
				}
			}
		}

		.fridge-stock-row {
			.content {
				display: flex;
				flex-wrap: wrap;
				background-color: #fff;
				border-radius: 20rpx;
				padding-bottom: 5px;

				.item-box {
					display: flex;
					width: 23%;
					position: relative;
					margin-bottom: 10px;
					align-items: center;
					justify-content: center;
					margin: 0 1%;

					>image {
						border-radius: 20rpx;
						width: 100%;
						height: 150rpx;
						padding: 5px;
					}

					.item-name-text {
						background-color: rgba(4, 11, 5, 0.5);
						width: 100%;
						position: absolute;
						bottom: 0;
						color: #fff;
						display: flex;
						justify-content: center;
						border-radius: 0 0 20rpx 20rpx;
					}
				}
			}
		}
	}
</style>